<template>
  <div class="container">
    <div class="row full-width q-my-md">
      <div class="title">My Playlists</div>
    </div>
    <q-table
      selection="multiple"
      v-model:selected="selected"
      v-model:pagination="pagination"
      :columns="columns"
      :rows="playlists"
      :loading="isLoading"
      @request="onRequest"
    >
      <template v-slot:top v-if="selected.length > 0">
        <div class="row">
          <q-btn-dropdown flat color="sub" label="More Actions" no-caps>
            <q-list>
              <q-item clickable v-close-popup>
                <q-item-section>
                  <q-item-label>Delete Forever</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
      </template>
      <template v-slot:body-cell-playlist="{ value, row, rowIndex }">
        <q-td
          auto-width
          @mouseover="onItemOver($event, row, rowIndex)"
          @mouseout="onItemOut"
        >
          <q-img
            class="playlist-cover"
            style="width: 166px; height: 100%"
            :src="value"
            :ratio="4 / 3"
            @click="onItemClick($event, row, rowIndex)"
          >
            <div
              style="font-size: 14px; width: 4em"
              class="absolute-right column justify-center items-center"
            >
              <div class="q-mb-xs">{{ row.numContents }}</div>
              <q-icon style="font-size: 18px" name="mdi-playlist-play" />
            </div>
            <div
              class="absolute-full text-subtitle2 flex flex-center no-pointer-events"
              v-if="onOver && onOverIndex === rowIndex"
            >
              <q-btn
                flat
                icon="mdi-open-in-new"
                padding="none"
                style="font-size: 18px"
              />
            </div>
          </q-img>
        </q-td>
      </template>
      <template v-slot:body-cell-description="{ row, rowIndex }">
        <q-td
          auto-width
          @mouseover="onItemOver($event, row, rowIndex)"
          @mouseout="onItemOut"
        >
          <div
            class="row no-wrap full-width justify-around"
            v-if="onOver && onOverIndex === rowIndex"
          >
            <q-btn
              flat
              icon="mdi-alert-circle-outline"
              padding="none"
              style="font-size: 18px"
              @click="showDetail(row)"
            />
            <q-btn
              flat
              icon="mdi-pencil"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              icon="mdi-plus"
              padding="none"
              style="font-size: 18px"
              @click="addContent(row)"
            />
            <q-btn
              flat
              icon="mdi-share-variant"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              :icon="row.isPinned ? 'mdi-pin-off' : 'mdi-pin'"
              padding="none"
              style="font-size: 18px"
            />
            <q-btn
              flat
              icon="mdi-dots-vertical"
              padding="none"
              style="font-size: 18px"
            />
          </div>
          <div class="video-info column" v-else>
            <div class="video-title one-line-text">{{ row.title }}</div>
            <div class="video-description three-line-text">
              {{ row.description }}
            </div>
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-status="{ value }">
        <q-td auto-width>
          <video-status-icon :status="value" />
        </q-td>
      </template>
      <template v-slot:body-cell-ratio>
        <q-td auto-width>
          <div class="column">
            <div style="width: 100%; text-align: end">80%</div>
            <q-linear-progress
              rounded
              style="width: 88px"
              size="8px"
              :value="0.8"
              color="white"
            ></q-linear-progress>
          </div>
        </q-td>
      </template>
    </q-table>
    <addto-playlist-dialog
      v-model="showAddtoPlaylistDialog"
      :playlist="currentPlaylist"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { IPage } from 'boot/axios';
import { useRouter } from 'vue-router';
import VideoStatusIcon from 'components/video/VideoStatusIcon.vue';
import Playlist from 'src/models/Playlist';
import AddtoPlaylistDialog from 'components/playlist/AddToPlaylistDialog.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const columns = ref<any[]>([
  {
    name: 'playlist',
    label: 'Playlist',
    field: 'coverImage',
    align: 'left',
  },
  {
    name: 'description',
    label: 'Description',
    align: 'left',
  },
  { name: 'status', label: 'Status', field: 'status', align: 'left' },
  {
    name: 'count',
    label: 'Video count',
    field: 'viewCount',
    align: 'center',
  },
  {
    name: 'date',
    label: 'Date',
    field: 'createTimeLabel',
    align: 'center',
  },
]);
const userStore = useUserStore();
const globalStore = useGlobalStore();
const $q = useQuasar();
const router = useRouter();
const playlists = computed(() => userStore.myPlaylists);
const page = computed(() => userStore.myPlaylistsPage);
const pagination = ref<any>({
  page: 0,
  rowsPerPage: 10,
  rowsNumber: 0,
});
const showAddtoPlaylistDialog = ref(false);
const isLoading = ref(false);
const selected = ref([]);
const onOver = ref(false);
const onOverIndex = ref();
const currentPlaylist = ref<Playlist | undefined>(undefined);
onMounted(async () => {
  await onRequest();
});
const onRequest = async (prop: any = null) => {
  isLoading.value = true;
  let params = {
    page: pagination.value.page,
    size: pagination.value.rowsPerPage,
  };
  if (prop) {
    params = {
      page: prop.pagination.page,
      size: prop.pagination.rowsPerPage,
    };
  }
  await userStore.getMyPlaylists(params);
  pagination.value = {
    page: page.value!.page,
    rowsPerPage: page.value!.size,
    rowsNumber: page.value!.total,
  };
  isLoading.value = false;
};
const onItemOver = (event: any, row: Playlist, index: number) => {
  onOver.value = true;
  onOverIndex.value = index;
};
const onItemOut = () => {
  onOver.value = false;
  onOverIndex.value = undefined;
};
function showDetail(item: Playlist) {
  globalStore.setMyContentsRightDrawer(item);
}
function addContent(item: Playlist) {
  showAddtoPlaylistDialog.value = true;
  currentPlaylist.value = item;
}
function onItemClick(event: any, row: Playlist, index: number) {
  router.push({ name: 'Playlist', params: { id: row.id } });
}
</script>
<style lang="scss" scoped>
$description-width: 244px;
.title {
  font-size: 22px;
}
.video-info {
  width: $description-width;
  max-width: $description-width;
  .video-title {
    width: $description-width;
    font-size: 14px;
    font-weight: bold;
  }
  .video-description {
    width: $description-width;
    height: 60px;
    font-size: 12px;
    color: $sub;
  }
}
</style>
